<template>
    <div>
        <div class="container">
            
            <TableCustom :columns="columns" :tableData="menuData" row-key="l_code" :has-pagination="false">
                <template #toolbarBtn>
                    <!-- <el-button type="warning" :icon="CirclePlusFilled" @click="addNewBigClass">新增大类</el-button> -->
                    <el-button type="warning" :icon="CirclePlusFilled" @click="addNewQuestion(0)">新增问题</el-button>
                </template>
                <template #operator="{rows}">
                    <!-- {{ rows.l_p_code || '' }} -->
                    <el-button v-show="rows.l_p_code == 0" type="warning" :icon="CirclePlusFilled" @click="addNewQuestion(rows)">新增问题</el-button>
                    <el-button v-show="rows.l_p_code != 0" type="primary" size="small" :icon="Edit" @click="handleEdit(rows)">
                        编辑
                    </el-button>
                    <el-button v-show="rows.l_p_code != 0" type="danger" size="small" :icon="Delete" @click="handleDelete(rows)">
                        删除
                    </el-button>
            </template>
            </TableCustom>

        </div>
        <el-dialog :title="dialogTitle" v-model="visible" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">
            </TableEdit>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="usrGuide-column">
import { ref } from 'vue';
import { ElMessage,ElMessageBox } from 'element-plus';
import { CirclePlusFilled, Edit, Delete } from '@element-plus/icons-vue';
import TableCustom from '@/components/table-custom.vue';
import { FormOption } from '@/types/form-option';
import { query_guide_list, update_guide_content, query_list, delete_guide } from '@/api';

const menuData = ref([])

const queryList = () => {
    query_guide_list().then(res => {
        menuData.value = res.data
    })
}

queryList()

const dialogTitle =  ref('新增')
// 表格相关
let columns = ref([
    { prop: 'l_name', label: '问题描述', align: 'left' },
    { prop: 'l_content', label: '答案' },
    { prop: 'operator', label: '操作', width: 250 },
])

const addNewBigClass = () => {
    options.value.list = [
        { type: 'input', label: '大类', prop: 'l_name', required: true, placeholder:'请输入大类名称' },
        { type: 'textarea', label: '大类简介', prop: 'l_content', required: true, placeholder:'请输入大类简介'  },
    ]
    visible.value = true
}
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref<any>({});
const addNewQuestion = (row) => {
    let disabledItem = false
    query_list({
        "filter":"guide"
    }).then(res => {
        
        if (row){
            disabledItem = true
            rowData.value = { l_p_code: row.l_code, l_content: null, l_name: null, l_code: null};
            console.log(rowData.value)
            isEdit.value = true;
            dialogTitle.value = '新增'
           
        }else {
            disabledItem = false
            dialogTitle.value = '新增'
        }
        console.log(disabledItem)
        options.value.list = [
            { type: 'select', label: '问题类别', prop: 'l_p_code', required: true, placeholder: '请选择问题类别', opts: res.data, labelItem: 'l_name', valueItem: 'l_code', disabled: disabledItem },
            { type: 'input', label: '问题描述', prop: 'l_name', required: true, placeholder:'请输入问题描述' },
            { type: 'textarea', label: '答案', prop: 'l_content', required: true, placeholder:'请输入问题答案'  },
        ]
        visible.value = true
        
    })
}

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '100px',
    span: 12,
    list: [
        { type: 'select', label: '问题类别', prop: 'l_p_code', required: true, placeholder: '请选择问题类别', opts: [], labelItem: 'l_name', valueItem: 'l_code' },
        { type: 'input', label: '问题描述', prop: 'l_name', required: true, placeholder:'请输入问题描述' },
        { type: 'input', label: '答案', prop: 'l_content', required: true, placeholder:'请输入问题答案'  },
    ]
})

const handleEdit = (row) => {
    query_list({
        "filter":"guide"
    }).then(res => {
        options.value.list = [
            { type: 'select', label: '问题类别', prop: 'l_p_code', required: true, placeholder: '请选择问题类别', opts: res.data, labelItem: 'l_name', valueItem: 'l_code' },
            { type: 'input', label: '问题描述', prop: 'l_name', required: true, placeholder:'请输入问题描述' },
            { type: 'textarea', label: '答案', prop: 'l_content', required: true, placeholder:'请输入问题答案'  },
        ]
        rowData.value = { ...row };
        console.log(rowData.value)
        isEdit.value = true;
        dialogTitle.value = '编辑'
        visible.value = true;
    })
    
};
const updateData = (data) => {
    console.log(data)
    update_guide_content(data).then(res => {
        ElMessage.success('新增问题成功');
        queryList()
        closeDialog();
    })
    
};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};


// 删除相关
const handleDelete = (row) => {
    ElMessageBox.confirm('确认要删除该问题', '提示', {
        type: 'warning'
    })
    .then(async () => {
        delete_guide({l_code: row.l_code }).then(res => {
            if (res.code == 1000) {
                ElMessage.success('删除成功');
                queryList()
            }
        })
    })
    .catch(() => { });
}
</script>

<style scoped></style>